<template>
  <a-form
      ref="menuAdd"
      :model="addForm"
      :rules="addRules"
      name="add_form"
      class="menu-add-form"
      :label-col="{style: {width: '70px'}}"
  >
    <a-row>
      <a-col :offset="2" :span="20">
        <a-form-item name="menuid" label="菜单ID">
          <a-input v-model:value.trim="addForm.menuid" placeholder="请输入菜单ID"></a-input>
        </a-form-item>
      </a-col>
    </a-row>
    <a-row>
      <a-col :offset="2" :span="20">
        <a-form-item name="menuname" label="菜单名称">
          <a-input v-model:value.trim="addForm.menuname" placeholder="请输入菜单名称"></a-input>
        </a-form-item>
      </a-col>
    </a-row>
    <a-row>
      <a-col :offset="2" :span="20">
        <a-form-item name="menucode" label="菜单码">
          <a-input v-model:value.trim="addForm.menucode" placeholder="请输入菜单码"></a-input>
        </a-form-item>
      </a-col>
    </a-row>
    <a-row>
      <a-col :offset="2" :span="20">
        <a-form-item name="fatherid" label="父菜单ID">
          <a-select v-model:value="addForm.fatherid" placeholder="请选择父级菜单">
            <a-select-option v-for="p in menuData" :key="p.menuid" :value="p.menuid">{{
                p.menuname
              }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
    </a-row>
    <a-row v-if="updateData">
      <a-col :offset="2" :span="20">
        <a-form-item name="status" label="激活状态">
          <a-select v-model:value="addForm.status" placeholder="请选择激活状态">
            <a-select-option value="0">未激活</a-select-option>
            <a-select-option value="1">激活</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
    </a-row>
    <a-row>
      <a-col :offset="8" :span="8">
        <a-button type="primary" style="margin-right: 10px;" :loading="loading" v-if="!updateData" @click="ok('0')">提交
        </a-button>
        <a-button type="primary" style="margin-right: 10px;" :loading="loading" v-if="updateData" @click="ok('1')">修改
        </a-button>
        <a-button @click="cancel">关闭</a-button>
      </a-col>
    </a-row>
  </a-form>
</template>

<script>
import {getCurrentInstance, watch, reactive, ref, toRefs} from "vue";
import {valids} from "@/utils/valid";
import {apiRequest, saveMenu} from "@/service/service";

export default {
  name: "MenuAdd",
  props: {
    menuData: Array,
    updateData: Object
  },
  emits: ['on-ok', 'on-cancel'],
  setup(props, context) {
    const {proxy} = getCurrentInstance()
    const menuAdd = ref()
    const loading = ref(false)
    const state = reactive({
      addForm: {
        menuid: '',
        menuname: '',
        menucode: '',
        fatherid: null,
        status: '',
        operation: '0'
      }
    })
    watch(() => props.updateData, () => {
      state.addForm = props.updateData ? props.updateData : state.addForm
    }, {deep: true, immediate: true})
    const addRules = {
      menuid: [{
        required: true,
        trigger: 'change',
        validator: valids.validIL({len: 4, label: '菜单ID'})
      }],
      menuname: [{
        required: true,
        trigger: 'change',
        validator: valids.valid({minLen: 4, maxLen: 20, label: '菜单名称'})
      }],
      menucode: [{
        required: true,
        trigger: 'change',
        validator: valids.validIL({len: 3, label: '菜单码'})
      }],
      fatherid: [{
        required: true,
        trigger: 'change',
        message: '请选择父菜单！'
      }]
    }

    function ok(ope) {
      state.addForm.operation = ope
      menuAdd.value.validateFields().then(() => {
        loading.value = true
        apiRequest(saveMenu(state.addForm), () => {
          loading.value = false
          proxy.$Message.success(ope === '0' ? "新增菜单成功" : "修改菜单成功")
          state.addForm = {
            menuid: '',
            menuname: '',
            menucode: '',
            fatherid: null,
            status: '',
            operation: '0'
          }
          context.emit('on-ok')
        }, () => loading.value = false)

      }).catch(() => {
        proxy.$Notice.error("数据不合规！")
      })
    }

    function cancel() {
      // 清空校验结果
      menuAdd.value.clearValidate()
      // 清空表单数据
      state.addForm = {
        menuid: '',
        menuname: '',
        menucode: '',
        fatherid: null,
        status: '',
        operation: '0'
      }
      context.emit('on-cancel')
    }

    return {
      menuAdd,
      loading,
      ...toRefs(state),
      addRules,
      ...toRefs(props),
      ok,
      cancel
    }
  }
}
</script>

<style scoped>
</style>
